<template>
  <div class="otherHome">
    <Other-Header index="3" bgColor="#5741d9"></Other-Header>
    <div class="informationBox">
      <!-- 活动-->
      <div class="newsItem" v-for="(item, index) in items" :key="index">
        <div class="dateInfo fl activityStatus start" v-if="item.status==0">
          <p class="date">{{$t('l.other_a_77')}}</p>
          <p class="month">{{item.startDate}}~{{item.endDate}}</p>
        </div>
        <div class="dateInfo fl activityStatus processing" v-else-if="item.status==1">
          <p class="date">{{$t('l.other_a_78')}}</p>
          <p class="month">{{item.startDate}}~{{item.endDate}}</p>
        </div>
        <div class="dateInfo fl activityStatus over" v-else-if="item.status==2">
          <p class="date">{{$t('l.other_a_79')}}</p>
          <p class="month">{{item.startDate}}~{{item.endDate}}</p>
        </div>
        <img v-bind:src="item.src" alt class="newsImg" />
        <div class="newsDetails">
          <h4 class="newsTitle">{{item.title}}</h4>
          <p class="newsDesc">{{item.details}}</p>
          <el-button class="btnDetail" size="small" @click="detailsMessage(item.id)">{{$t('l.other_a_24')}}</el-button>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style lang="less" scoped>
.otherHome {
  padding-top: 100px;
  background-color: #f7f8fc;
  position: absolute;
  top: 0;
  min-height: 100%;
  width: 100%;
}
.informationBox {
  width: 1200px;
  box-sizing: border-box;
  margin: 20px auto 0;
  padding-bottom: 160px;
}
.newsItem {
  width: 1200px;
  height: 260px;
  box-sizing: border-box;
  padding: 45px 65px 45px 42px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 20px;
}
/* 日期 */
.dateInfo.activityStatus {
  position: relative;
  float: left;
  width: 128px;
  height: 128px;
  border-radius: 6px;
  text-align: center;
  padding: 24px 19px 0;
  box-sizing: border-box;
  margin-right: 52px;
  &.start {
    background: rgba(235, 251, 244, 1);
    color: rgba(13, 168, 139, 1);
    .date {
      background: rgba(215, 245, 231, 1);
    }
  }
  &.processing {
    background: rgba(255, 249, 239, 1);
    color: rgba(247, 137, 0, 1);
    .date {
      background: rgba(255, 240, 217, 1);
    }
  }
  &.over {
    background: rgba(239, 242, 255, 1);
    color: rgba(148, 152, 170, 1);
    .date {
      background: rgba(217, 224, 255, 1);
    }
  }
  .date {
    position: relative;
    height: 70px;
    border-radius: 5px;
    font-size: 16px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    line-height: 70px;
    margin: 0 auto;
  }
  .month {
    height: 34px;
    font-size: 12px;
    font-familyA: Roboto-Medium;
    font-weight: 500;
    line-height: 37px;
    text-align: center;
  }
}
/* 图片 */
.newsImg {
  float: right;
  width: 280px;
  height: 170px;
  margin-left: 50px;
}
/* 内容 */
.newsDetails {
  overflow: hidden;
  .newsTitle {
    font-size: 22px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 30px;
    margin-bottom: 16px;
  }
  .newsDesc {
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, 1);
    line-height: 28px;
    margin-bottom: 16px;
  }
  .btnDetail {
    width: 130px;
  }
}
</style>
<script>
import commonMixins from "@/mixins";
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";

function checkDateStatus(start, end) {
  let now = Date.now(),
    status = 0,
    startDate = +new Date(start),
    endDate = +new Date(end);

  if (now < startDate) {
    status = 0;
  } else if (now < endDate && now > startDate) {
    status = 1;
  } else {
    status = 2;
  }
  return status;
}

export default {
  mixins: [commonMixins],
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      items: []
    };
  },
  async created() {
    this.getNewsList();
  },
  methods: {
    async getNewsList() {
      let params = {
        lang: "zh_CN",
        pageNum: 1,
        pageSize: 15,
        typeCode: "activity"
      };
      let res = await api.announcementList(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        let { records: activityList } = data;

        this.items = activityList.map(item => ({
          id: item.id,
          date: item.createTime && item.createTime.substr(0, 10),
          status: checkDateStatus(item.startDate, item.endDate),
          startDate: item.startDate && item.startDate.substr(5, 5), //开始时间
          endDate: item.endDate && item.endDate.substr(5, 5), //结束时间
          src: item.pictureUrl,
          title: item.title,
          details: item.introduction
        }));
      } else {
        this.$layer.msg(msg);
      }
    },
    detailsMessage(id) {
      this.$router.push(`/activityDetail/${id}`);
    }
  }
};
</script>
